<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('结算单详情')"/>
</head>
<style>
    .table-detail table > thead > tr > th, .table-detail table > tbody > tr > th, .table-detail table > tfoot > tr > th, .table-detail table > thead > tr > td, .table-detail table > tbody > tr > td, .table-detail table > tfoot > tr > td {
        border-bottom: 1px solid #e7eaec !important;
        border: 0px;
    }
</style>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <div class="col-sm-12">
                <div class="col-sm-4">
                    <label><h3>结算单号：</h3></label>
                    <label><h3 th:text="${hhOrder.orderId}"></h3></label>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="col-sm-4">
                    <label><h3>水电师傅：</h3></label>
                    <label><h3 th:text="${hhOrder.workerName}"></h3></label>
                </div>
                <div class="col-sm-4">
                    <label><h3>销售总额：</h3></label>
                    <label><h3 th:text="${hhOrder.totalMoney}"></h3></label>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="col-sm-4">
                    <label><h3>客户姓名：</h3></label>
                    <label><h3 th:text="${hhOrder.consumerName}"></h3></label>
                </div>
                <div class="col-sm-4">
                    <label><h3>退货总额：</h3></label>
                    <label><h3 th:text="${hhOrder.orderType}"></h3></label>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="col-sm-4">
                    <label><h3>欠款金额：</h3></label>
                    <label><h3 th:text="${hhOrder.orderDebt}"></h3></label>
                </div>
                <div class="col-sm-4">
                    <label><h3>实付总额：</h3></label>
                    <label><h3 th:text="${hhOrder.orderSale}"></h3></label>
                </div>
            </div>
        </div>
        <div class="btn-group-sm" id="toolbar1" role="group">
            <label><h3>销售单详情</h3></label>
        </div>
        <div class="col-xs-12 select-table table-detail">
            <table id="bootstrap-table1"></table>
        </div>
        <div class="btn-group-sm" id="toolbar2" role="group">
            <label><h3>退货单详情</h3></label>
        </div>
        <div class="col-xs-12 select-table table-detail">
            <table id="bootstrap-table2"></table>
        </div>
        <div class="btn-group-sm" id="toolbar3" role="group">
            <label><h3>付款详情</h3></label>
        </div>
        <div class="col-xs-12 select-table">
            <table id="bootstrap-table3"></table>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var hhOrder = [[${hhOrder}]];
    $(function () {
        var options = {
            id: "bootstrap-table1",
            toolbar: "toolbar1",
            url: ctx + "close/manage/saleList",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            queryParams: {
                orderId: hhOrder.orderId
            },
            detailView: true,
            onExpandRow: function (index, row, $detail) {
                initChildTable(index, row, $detail);
            },
            modalName: "销售单",
            columns: [
                {
                    field: 'orderId',
                    align: 'center',
                    title: '订单号'
                },
                {
                    field: 'totalMoney',
                    align: 'center',
                    title: '总价'
                },
                {
                    field: 'remark',
                    align: 'center',
                    title: '备注'
                },
                {
                    field: 'orderDate',
                    align: 'center',
                    title: '开单日期'
                }]
        };
        $.table.init(options);
    });

    $(function () {
        var options = {
            id: "bootstrap-table2",
            toolbar: "toolbar2",
            url: ctx + "close/manage/returnList",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            queryParams: {
                orderId: hhOrder.orderId
            },
            detailView: true,
            onExpandRow: function (index, row, $detail) {
                initChildTable(index, row, $detail);
            },
            modalName: "退货单",
            columns: [
                {
                    field: 'orderId',
                    align: 'center',
                    title: '订单号'
                },
                {
                    field: 'totalMoney',
                    align: 'center',
                    title: '总价'
                },
                {
                    field: 'remark',
                    align: 'center',
                    title: '备注'
                },
                {
                    field: 'orderDate',
                    align: 'center',
                    title: '开单日期'
                }]
        };
        $.table.init(options);
    });

    $(function () {
        var options = {
            id: "bootstrap-table3",
            toolbar: "toolbar3",
            url: ctx + "close/manage/accountList",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            queryParams: {
                orderId: hhOrder.orderId
            },
            modalName: "销售单",
            columns: [
                {
                    field: 'thisAmount',
                    align: 'center',
                    title: '付款金额'
                },
                {
                    field: 'operateTime',
                    align: 'center',
                    title: '付款时间'
                }]
        };
        $.table.init(options);
    });

    initChildTable = function (index, row, $detail) {
        var childTable = $detail.html('<table style="table-layout:fixed"></table>').find('table');
        $(childTable).bootstrapTable({
            url: ctx + "order/detail/list",
            method: 'post',
            sidePagination: "server",
            contentType: "application/x-www-form-urlencoded",
            queryParams: {
                orderId: row.orderId
            },
            columns: [{
                title: "序号",
                align: 'center',
                formatter: function (value, row, index) {
                    return $.table.serialNumber(index);
                }
            },
                {
                    field: 'productName',
                    width: '20',
                    widthUnit: '%',
                    title: '商品名'
                },
                {
                    field: 'productBrand',
                    title: '品牌',
                    align: 'center'
                },
                {
                    field: 'productNum',
                    title: '数量',
                    align: 'center'
                },
                {
                    field: 'productUnit',
                    title: '单位',
                    align: 'center'
                },
                {
                    field: 'detailPrice',
                    title: '单价',
                    align: 'center'
                },
                {
                    field: 'detailAmount',
                    title: '金额',
                    align: 'center'
                },
                {
                    field: 'remark',
                    title: '备注',
                    align: 'center'
                }]
        });
    };
</script>
</body>
</html>